<!--  -->
<template>
  <div>
    <el-card shadow="hover" style="min-height:403px;">
      <template #header>
        <div class="clearfix">
          <span>{{ title }}</span>
          <a href="https://gitee.com/llvyr/vue-ts" target="_blank" rel="noopener noreferrer" class="link">源码传送门</a>
        </div>
      </template>
      <el-table :show-header="false" :data="todoList" style="width:100%;">
        <el-table-column prop="title">
          <template #default="{ row }">
            <div>
              <span> {{ row.title }} </span>
              <span style="display: inline-block; margin-left:30px;">
                {{ row.desc }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>
<script setup lang='ts' >
import { PropType } from 'vue'
import { ITodoList } from "../types.ts"
defineProps({
  todoList: {
    type: Object as PropType<ITodoList[]>,
    required: true
  },
  title: {
    type: String,
    default: () => '项目技术要点'
  }
})




</script>
<style lang='less' scoped>
.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.link {
  text-decoration: none;
  font-size: 14px;
}
</style>
